<!-- 注册页 -->
<template>
    <div class="register_box">

        <!-- logo -->
        <div class="logo"  @click="ToBack">
            <img src="../assets/log-png.png" alt="">
        </div>
        <div class="login-list">
            <h1>注册页面</h1>
            <div class="login-head">
                <el-form :model="ruleForm" :rules="rules" ref="userForm">
                    <el-form-item prop="username" class="login-item">
                        <el-input type="text" v-model="ruleForm.username" prefix-icon="el-icon-user"
                            placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" style="margin-top: 30px" class="login-item">
                        <el-input type="password" v-model="ruleForm.password" show-password prefix-icon="el-icon-lock"
                            placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-button type="primary" round @click="submitForm">注册</el-button>
                        <el-button round @click="ToBack">取消</el-button>
                    </el-row>
                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        // var validatePass = (rule, value, callback) => {
        //     if (value === '') {
        //         callback(new Error('请输入账号'));
        //     } else {
        //         callback();
        //     }

        // };

        return {
            ruleForm: {
                username: '',
                password: ''
            },

            rules: {
                username: [
                    { required: true, message: '账号不能为空！', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '密码不能为空！', trigger: 'blur' },
                ],
                // password: [
                //     { required: true, message: "请输入密码", trigger: "blur" }
                // ],
            }

        }

    },
    methods: {
        submitForm() {
            // this.$refs.userForm.validate((valid) => {
            //     if (valid) {
            axios.post("api/user/register", this.ruleForm).then((res) => {
                if (res.code == 400) {
                    console.log(res);
                    this.$message.error(res.message);
                } else {
                    console.log(res);
                    this.$message.success(res.message);
                    this.$router.go(-1);
                }
            });
        },

        ToBack() {
            this.$router.go(-1)
        },
        toRegister() {
            this.$router.push('/login')
        },

        changeColor() {
            const text = document.querySelector('.Text');
            text.style.color = "blue"
            text.style.cursor = "pointer";
        },

        outColor() {
            const text = document.querySelector('.Text');
            text.style.color = ""
        }
    }
}
</script>

<style scoped>
.register_box {
    padding: 0;
    margin: 0;
}

.register_box {
    background-image: url('../assets/R-C.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    position: relative;
}

.logo img {
    margin: 20px 0 0 30px;
    width: 100px;
    height: 60px;
    float: left;
}

.login-list {
    text-align: center;
    width: 450px;
    height: 360px;
    margin: 0 auto;
    padding: 40px;
    background-color: #f7f7f78a;
    border-radius: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 3px 1px 13px 2px #999;
}

.login-item {
    margin-top: 12px;
    margin-bottom: 20px;
}

/* 按钮 */
.el-button.is-round {
    width: 250px;
    display: block;
    height: 50px;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 20px;
    padding: 12px 23px;
}

.el-color-picker__icon,
.el-input,
.el-textarea {
    display: inline-block;
    width: 380px;
}

/* 校验 */
.el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 42px;
}

.span {
    cursor: pointer;
}

.span span:hover {
    color: #3a8ee6;
}
</style>